<!--
 * Description: 模块配置详情
 * Company: 联宝（合肥）电子科技有限公司
 * Author: Qiuxue.Wu
 * Date: 2020/10/10 11:20
-->

<template>
  <div v-loading="isRequesting" class="model-config-detail">
    <!-- 功能按钮 -->
    <div class="func">
      <img v-if="isUpdateState" :src="closeIcon" @click="isUpdateState = false" />
      <img v-if="isUpdateState" :src="hookIcon" @click="save" />
      <el-switch v-model="isUpdateState" active-text="修改" inactive-text="显示"></el-switch>
    </div>
    <!--数据表单-->
    <el-form label-width="120px" :model="formData" size="mini" style="margin-top:20px">
      <el-row>
        <!--gcmFunction--->
        <el-col :span="12">
          <el-form-item :label="$t('GcmCmtyDivide.gcmFunction')">
            <el-select
              v-if="isUpdateState"
              v-model="formData.gcmFunction"
              clearable
              disabled
              :placeholder="$t('select.placeholder')"
            >
              <el-option
                v-for="item in $store.getters['enums/getGcmFunctionListOnly']"
                :key="item"
                :label="item"
                :value="item"
              />
            </el-select>
            <span v-else>{{ formData.gcmFunction }}</span>
          </el-form-item>
        </el-col>
        <!--commodity--->
        <el-col :span="12">
          <el-form-item :label="$t('GcmCmtyDivide.commodity')">
            <el-select
              v-if="isUpdateState"
              v-model="formData.commodity"
              clearable
              disabled
              filterable
              :placeholder="$t('select.placeholder')"
            >
              <el-option
                v-for="item in commodityFilter"
                :key="item.name"
                :label="item.name"
                :value="item.name"
              >
                <span style="float: left;">{{ item.name }}</span>
                <span style="float: right; color: #b4b4b4; font-size: 12px">
                  {{ item.gcmFunction }}
                </span>
              </el-option>
            </el-select>
            <span v-else>{{ formData.commodity }}</span>
          </el-form-item>
        </el-col>
        <!--配置键--->
        <el-col :span="12">
          <el-form-item label="配置键">
            <el-input v-if="isUpdateState" v-model="formData.configKey" clearable disabled />
            <span v-else>{{ formData.configKey }}</span>
          </el-form-item>
        </el-col>

        <!--配置名称--->
        <el-col :span="12">
          <el-form-item label="配置名称">
            <el-input v-if="isUpdateState" v-model="formData.configName" clearable />
            <span v-else>{{ formData.configName }}</span>
          </el-form-item>
        </el-col>

        <!--配置描述--->
        <el-col :span="12">
          <el-form-item label="配置描述">
            <el-input v-if="isUpdateState" v-model="formData.configDesc" clearable />
            <span v-else>{{ formData.configDesc }}</span>
          </el-form-item>
        </el-col>

        <!--配置值--->
        <el-col v-if="formData.configType !== 1" :span="12">
          <el-form-item v-if="!isPercent" key="configVal-1" label="配置值">
            <el-input v-if="isUpdateState" v-model="formData.configValue" clearable />
            <span v-else>
              {{ formData.configValue }}
            </span>
          </el-form-item>
          <el-form-item v-else key="configVal-2" label="配置值(%)">
            <el-input v-if="isUpdateState" v-model="formData.configValueTemp" clearable />
            <span v-else>
              {{ formData.configValueTemp }}
            </span>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <div class="table-area">
      <!--PlasticPellets-->
      <PlasticPellets
        v-if="this.formData.configKey === 'plastic_pellets'"
        :configKey="this.formData.configKey"
        :tableList="tableList"
      />

      <!--MachineTonnage-->
      <MachineTonnage
        v-if="this.formData.configKey === 'machine_tonnage'"
        :configKey="this.formData.configKey"
        :tableList="tableList"
      />

      <!--Flute-->
      <Flute
        v-if="this.formData.configKey === 'flute'"
        :configKey="this.formData.configKey"
        :tableList="tableList"
      />
    </div>
  </div>
</template>

<script>
import { modelConfigEdit } from '@/api/model/config'
import PlasticPellets from './me/PlasticPellets'
import MachineTonnage from './me/MachineTonnage'
import Flute from './me/Flute'

export default {
  name: 'ModelConfigDetail',

  components: { PlasticPellets, MachineTonnage, Flute },

  props: {
    detailData: {
      type: Object,
      default: () => {}
    },

    tableList: {
      type: Array,
      default: () => []
    }
  },

  data() {
    return {
      hookIcon: require('@/assets/icons/hook.png'),

      closeIcon: require('@/assets/icons/close.png'),

      // 正在查询
      isRequesting: false,

      // 是否是修改状态
      isUpdateState: false,

      optionDicList: [],

      commodityList: [],

      formData: {
        id: '',
        commodity: '',
        configDesc: '',
        configName: '',
        configKey: '',
        configValue: '',
        configValueTemp: '',
        gcmFunction: '',
        configType: ''
      }
    }
  },

  computed: {
    commodityFilter() {
      if (this.formData.gcmFunction) {
        return this.commodityList.filter(item => item.gcmFunction === this.formData.gcmFunction)
      } else {
        return this.commodityList
      }
    },

    isPercent() {
      return this.formData.configKey === 'management_profit'
    }
  },

  watch: {
    detailData: {
      handler() {
        this.formData = Object.assign({}, this.formData, { ...this.detailData })
      },
      immediate: true
    }
  },

  created() {
    this.optionDicList = this.$store.getters['dict/dictOptions']('ModelConfig')
    this.commodityList = this.$store.getters['commodity/getCommodityCollects']
    this.formData = Object.assign({}, this.formData, { ...this.detailData })
    if (this.formData.configType !== 1) {
      this.formData.configValueTemp = this.$calc(this.formData.configValue, 100, 'multiply', {
        precision: 4
      })
    }
  },

  methods: {
    async save() {
      try {
        await this.$confirmBox(this.$t('button.edit'), 'error')
        this.isRequesting = true
        if (this.isPercent) {
          this.formData.configValue = this.$calc(this.formData.configValueTemp, 100, 'distribute', {
            precision: 4
          })
          this.formData.configValueTemp = this.$calc(this.formData.configValue, 100, 'multiply', {
            precision: 4
          })
        }
        await modelConfigEdit(
          {
            id: this.formData.id,
            commodity: this.formData.commodity,
            configDesc: this.formData.configDesc,
            configKey: this.formData.configKey,
            configName: this.formData.configName,
            configValue: this.formData.configValue,
            gcmFunction: this.formData.gcmFunction
          },
          { msgSuccess: true, msgError: true }
        )
        this.isUpdateState = false
        this.$emit('save')
      } catch (error) {
        console.log(error)
      } finally {
        this.isRequesting = false
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.model-config-detail {
  padding: 30px 20px;
  position: relative;
  height: 100%;
}

.func {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  align-content: center;
  img {
    margin-right: 20px;
    width: 20px;
    height: 20px;
    cursor: pointer;
  }
}

.table-area {
  position: absolute;
  top: 185px;
  bottom: 0;
  left: 0;
  right: 0;
}

.el-form-item__content span {
  color: blue;
}
</style>
